<template>
  <ContentBase>
    <div class="waiting-cars-container">
      <ul class="waitcar-list">
        <WaitCar1 v-bind:carList="carList" />
      </ul>
    </div>
  </ContentBase>
</template>


<script>
import ContentBase from '@/components/ContentBase.vue';
import WaitCar1 from '@/components/WaitCar1.vue';
import { reactive, onMounted } from 'vue';
import $ from 'jquery';

export default {
  name: 'WaitingCarsInfoView',
  components: {
    ContentBase,
    WaitCar1,
  },
  setup() {
    const carList = reactive({ arr: [] })
    const pileIdList = ["慢桩A", "慢桩B", "慢桩C", "快桩A", "快桩B"];
    function getCarList() {
      for (let i = 0; i < pileIdList.length; i++) {
        const pileId = pileIdList[i];
        $.ajax({
          url: process.env.VUE_APP_BACKEND_URL + '/admin/checkChargerQueue',
          type: "get",
          data: { pileId: pileId },
          success(resp) {
            var cars = resp.data;
            for (let j = 0; j < cars.length; j++) {
              const element = cars[j];
              var res = {};
              res['pileId'] = pileId;
              res['carId'] = element['car_id'];
              res['carCapacity'] = element['car_capacity'];
              res['requestAmount'] = element['request_amount'];
              res['waitTime'] = element['wait_time'];
              carList.arr.push(res);
            }
          }
        });
      }
    }
    onMounted(() => {
      getCarList();
    });
    return {
      carList,
    }
  }
}
</script>

<style scoped>
.waiting-cars-container {
  background: linear-gradient(120deg, #e3f2fd 0%, #bbdefb 100%);
  min-height: 80vh;
  padding: 40px 0 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.waitcar-list {
  width: 100%;
  max-width: 700px;
  padding: 0;
  margin: 0;
}
</style>
